<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>孕妇空间</title>
<meta name="keywords" content="孕妇空间, 怀孕空间, 怀孕, 孕妇, 孕妇网, 孕妇知识, 怀孕网, 怀孕知识, 怀孕全书" />

<link href="css/reset.css" media="screen" rel="Stylesheet"
	type="text/css" />
<link href="css/960.css" media="screen" rel="Stylesheet"
	type="text/css" />
<link href="css/globals.css" media="screen" rel="Stylesheet"
	type="text/css" />
<link href="css/banner.css" media="screen" rel="Stylesheet"
	type="text/css" />
<link href="css/buttons.css" media="screen" rel="Stylesheet"
	type="text/css" />
	
<link rel='stylesheet' type='text/css' href='js/jquery/jquery-ui-1.8.14.custom.css' />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='js/jquery/jquery-1.5.2.min.js'></script> 
<script type='text/javascript' src='js/jquery/jquery-ui-1.8.14.custom.min.js'></script>
<script type='text/javascript' src='js/fullcalendar/fullcalendar.js'></script>
	<style>
        .state-highlight{   color:red;  }
		.state-error {color:red;}
		.validateTips { color:gray; }
		.inputDefault { color:gray;}
	</style>
<script type='text/javascript'>

	$(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
		
		
		
		
		//-----------------------login-----------------
		var email = $( "#email" ),
			password = $( "#password" ),
			tips = $( "#validateTips" ),
			email2 = $( "#email" ),
			password2 = $( "#password2" ),
			password3 = $( "#password3" ),
			born_day = $( "#born_day" ),
			tips2 = $( "#validateTips2" ),
			allTips = $( [] ).add( tips ).add( tips2 ),
			allFields = $( [] ).add( email ).add( password ).add( tips ).add( email2 ).add( password2 ).add( password3 ).add( born_day ).add( tips2 );
			
			function updateTips(obj, content) {
			obj.addClass( "state-highlight" );
			   obj.text( content );
			  setTimeout(function() {
				obj.removeClass( "validateTips");
			}, 300 ); 
		   }
		
		$( "#email" ).focus( function(){
		  $(this).removeClass( "state-error");
		} );
		
		function checkEmpty( obj, name, tipObj) {
			if ( obj.val().trim().length == 0 ) {
				obj.addClass( "state-error" );
				updateTips(tipObj, "请填写" + name );
				return false;
			} else {
				return true;
			}
		}

		function checkLength( obj, name, min, tipObj) {
			if ( obj.val().length < min ) {
				obj.addClass( "state-error" );
				updateTips(tipObj, name + "的长度至少要在 " + min + "个以上." );
				return false;
			} else {
				return true;
			}
		}
		
		function confirmPassword( obj1, obj2, tipObj) {
			if ( obj1.val() != obj1.val() ) {
				obj2.addClass( "state-error" );
				updateTips(tipObj, name + "的长度至少要在 " + min + "个以上." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( obj, regexp, name, tipObj) {
			if ( !( regexp.test( obj.val() ) ) ) {
				obj.addClass( "state-error" );
				updateTips(tipObj, name );
				return false;
			} else {
				return true;
			}
		}
	
		$( "#dialog_login_form" ).dialog({
			autoOpen: false,
			height: 240,
			width: 320,

			modal: true,
			buttons: {
				"登陆": function() {
					var bValid = true;
					//allFields.removeClass( "state-error" );
					bValid = bValid && checkEmpty( email, "邮箱", tips);
                    bValid = bValid && checkRegexp( email, /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, "邮箱格式不对，如: zhangshan@qq.com", tips);
					bValid = bValid && checkEmpty( password, "密码", tips);
					bValid = bValid && checkLength( password, "密码", 6, tips);
					
					if ( bValid ) {
						$.ajax({
							type: "post",
							url: "/ajax/login",
							data: {email: email.val(), password: password.val()},
							success: function(data, textStatus){
								if(data.tag == -1){
									updateTips(tips, "此邮箱还没有注册");
								}else if(data.tag == -2){
									updateTips(tips, "密码不对");
								}else{
									$("#login1_span").html(email.val());
								}
							},
							complete: function(XMLHttpRequest, textStatus){
								$( this ).dialog( "close" );
							},
							error: function(){
								updateTips(tips, "请重新输入");
							}
					});
					}
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
		
	
	$( "#dialog_register_form" ).dialog({
			autoOpen: false,
			height: 320,
			width: 360,
			modal: true,
			buttons: {
				"提交": function() {
					var bValid = true;
					//allFields.removeClass( "state-error" );
					bValid = bValid && checkEmpty( email2, "邮箱", tips2);
                    bValid = bValid && checkRegexp( email2, /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, "邮箱格式不对，如: zhangshan@qq.com" ,tips2);
					bValid = bValid && checkEmpty( password2, "密码", tips2);
					bValid = bValid && checkEmpty( password3, "密码", tips2);
					bValid = bValid && checkLength( password2, "密码", 6, tips2);
					bValid = bValid && confirmPassword( password2, password3, tips2);
					
					if ( bValid ) {
						$( this ).dialog( "close" );
					}
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
		

			$("#login_button").button().click(function() {
				$("#dialog_login_form").dialog( "open" );
			});
			
			$("#register_button").button().click(function() {
				$("#dialog_register_form").dialog( "open" );
			});

});
</script>
<style type='text/css'>
	#calendar {
		width: 500px;
		margin: 0 auto;
		}

</style>
</head>
<body class="home">
	<div class="gutter">
		<div class="container_16">
			<div class="logo grid_3">
				<a href="#"><img height="40" src="img/logo.png"
					title="Onehub" width="154" /> </a>
			</div>
			<div class="buttons grid_10"></div>
			<div class="buttons grid_3">
			<span id="login1_span" class="button wide"><button id="login_button"  class="button wide">登陆</button></span>
			<span id="login2_span" class="button wide"><button id="register_button"  class="button wide">注册</button></span>
			</div>
		</div>
	</div>
	<div id="navigation">
		<div id="menu_primary" class="container_16">
			<ul class="grid_12">
				<li class="menu_home"><a href="index.html">首页</a></li>
				<li class="menu_transfers"><a href="#">孕妇全书</a>
				</li>
				<li class="menu_about"><a href="#">关于我们</a></li>
			</ul>
			<div class="phone grid_4">(QQ)123456789</div>
		</div>
	</div>

 
 
<div class="wrapper"> 
  <div id="home_content" class="container_16"> 
  <div class="grid_16" style="height:20px;"></div><div class="clear"></div>
   <div class="grid_9"><div id='calendar'></div></div>
   <div class="grid_7">
   <div id="content_right"> 
   <h3>我要认真看完</h3>
   第五个月：胎动愈来愈强烈，胎儿已长出头发，分吮吸拇指，身体各部分的器官逐渐成长。胎儿长约25厘米，重约224克至500克。
   第六个月：胎儿已可以开闭眼睛和听到母体内的声音，手印和脚印亦已形成。这时胎儿长约29至35厘米，重约560克至680克。
   第六个月：胎儿已可以开闭眼睛和听到母体内的声音，手印和脚印亦已形成。这时胎儿长约29至35厘米，重约560克至680克。
   </div>
   </div>
 </div> 
  
</div> 


<div id="footer"> 
  <div class="container_16">


   <div class="grid_10  prefix_6">
© 2011 孕妇空间 Inc. All rights reserved
</div>

 </div> 
</div>   


<div id="dialog_login_form" title="登陆">
<div class="validateTips"  id="validateTips">请输入用户名和密码</div>
	<form>
	<fieldset>
	<div style="padding:20px 10px;">
	<div style="width:70px;text-align:right;float:left;"><label for="email">电子邮箱</label></div>
	<div style="padding-left:10px;width:160px;float:left;"><input type="text" name="email" id="email" value="" class="inputDefault" /></div>
	</div>
	<div style="padding:20px 10px;">
	<div style="width:70px;text-align:right;float:left;"><label for="password">密码</label></div>
	<div style="padding-left:10px;width:160px;float:left;"><input type="password" name="password" id="password" value="" class="inputDefault" /></div>
	</div>
	</fieldset>
	</form>
</div>

<div id="dialog_register_form" title="注册">
<div class="validateTips" id="validateTips2">请输入用户名和密码</div>
	<form>
	<fieldset>
	<div style="padding:20px 10px;">
	<div style="width:100px;text-align:right;float:left;"><label for="email2">电子邮箱<span style="color:red;">*</span></label></div>
	<div style="padding-left:10px;width:160px;float:left;"><input type="text" name="email2" id="email2" value="" class="inputDefault" /></div>
	</div>
	<div style="padding:20px 10px;">
	<div style="width:100px;text-align:right;float:left;"><label for="password2">密码<span style="color:red;">*</span></label></div>
	<div style="padding-left:10px;width:160px;float:left;"><input type="password" name="password2" id="password2" value="" class="inputDefault" /></div>
	</div>
	<div style="padding:20px 10px;">
	<div style="width:100px;text-align:right;float:left;"><label for="password3">再次输入密码<span style="color:red;">*</span></label></div>
	<div style="padding-left:10px;width:160px;float:left;"><input type="password" name="password3" id="password3" value="" class="inputDefault" /></div>
	</div>
	<div style="padding:20px 10px;">
	<div style="width:100px;text-align:right;float:left;"><label for="born_day">宝宝预产期</label></div>
	<div style="padding-left:10px; width:160px;float:left;"><input type="password" name="born_day" id="born_day" value="" class="inputDefault" /></div>
	</div>
	</fieldset>
	</form>
</div>
</body>
</html>
